/* eslint-disable no-undef */
import React, {Component} from 'react';
import cookies from 'react-cookies';
import {Layout, Menu, Icon, Row, Col} from 'antd';
import './MainApp.css';
import Login from './page/login/Login';
import Register from './page/login/Register';
import Home from './page/home/Home';
import Keys from './config/Keys';
import AddStateFlow from './page/stateflow/AddStateFlow.js';
const {Header, Content, Sider} = Layout;


class MainApp extends Component {

    /**
     * 页面Code
     */
    PAGE_CODES = Keys.PAGE_CODES;

    constructor() {
        super();

        this.state = {
            /** 当前选中页面key */
            selectedKey: this.PAGE_CODES.HOME,
        };

        // 页面内容配置
        this.contentData = this.initContentData();

        // 页面数据入参，可通过配置此参数，在页面间传值
        this.params = undefined;

        // 登录用户信息
        let userInfoJson = localStorage.getItem(Keys.COOKIE_KEY.USER_INFO);
        this.userInfo = !userInfoJson ? undefined : JSON.parse(userInfoJson);

        this.componentData = new Map();

    }

    /**
     * 在渲染前调用
     * */
    componentWillMount() {

        if (!this.userInfo || !this.userInfo.account) {

            this.state.selectedKey = this.PAGE_CODES.LOGIN;

        }
    }

    /**
     * 设置用户信息
     * @param data
     */
    setUserInfo = (data) => {
        this.userInfo = data;
        localStorage.setItem(Keys.COOKIE_KEY.USER_INFO, JSON.stringify(this.userInfo));
    };

    /**
     * 打开左侧新页面
     * @param code 页面code
     * @param params 页面入参
     */
    openPage = (code, params) => {

        if (code === this.PAGE_CODES.HOME) {
            this.params = params;
            this.setState({
                openKey: code,
                selectedKey: code
            });
            return;
        }

        this.params = params;
        this.setState({
            selectedKey: code
        });
    };


    setComponentData = (key, data) => {
        this.componentData.set(key, data);
    };

    getComponentData = (key) => {
        return this.componentData.get(key);
    };


    render() {

        // 取到左侧页面
        let contentView = this.contentData.get(this.state.selectedKey);


        return (
            <Layout>

                <Header className="header">
                    <div className={'app-header-div'}>

                        <div className={'app-header-div-left'}>
                            StateFlow 状态流转中台
                        </div>

                        <div className={'app-header-div-right'}>
                            <label className={'app-user-name'}>
                                {!this.userInfo ? '' : '欢迎您，' + this.userInfo.account}
                            </label>
                            <a onClick={() => {
                                cookies.remove(Keys.COOKIE_KEY.USER_INFO);
                                localStorage.removeItem(Keys.COOKIE_KEY.USER_INFO);
                                window.location.reload();
                            }}>
                                {!this.userInfo ? '' : '[退出]'}
                            </a>
                        </div>
                    </div>
                </Header>

                <Layout>
                    <Layout style={{padding: '20px'}}>

                        <Content
                            style={{
                                background: '#fff',
                                padding: 5,
                                margin: 0,
                                minHeight: 280,
                            }}
                        >

                            {contentView}

                        </Content>

                    </Layout>
                </Layout>

            </Layout>
        );
    }


    /**
     * 初始化页面配置
     * @returns {Map<any, any>}
     */
    initContentData() {
        let contentData = new Map();
        // 每个页面都有上下文参数，上下文即是根页面的完整数据
        contentData.set(this.PAGE_CODES.HOME, <Home context={this}/>);
        contentData.set(this.PAGE_CODES.LOGIN, <Login context={this}/>);
        contentData.set(this.PAGE_CODES.REGISTER, <Register context={this}/>);
        contentData.set(this.PAGE_CODES.ADD_STATE_FLOW, <AddStateFlow context={this}/>);
        return contentData;
    }


}


export default MainApp;
